
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>List Department</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
.top {
	border: 0px solid #ccc;
	overflow: hidden;
	padding: 0;
	margin: 0;
	padding-bottom: 2px; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.top-left {
	border: 0px solid #ccc;
	font:bold 14px Arial,  Verdana, Helvetica, sans-serif;
	float: left;
	padding: 5px 0;
}
.top-right {
	border: 0px solid #ccc;
	float: right;
	text-align: right;
}
.details1 {
	overflow: hidden;
}
.content-left {
	float: left;
	padding-right: 50px;
}
.content-right {
}
.frm div {
    display: table;
    position: static;
}
.frm div label {
	width: 150px;
	word-wrap: break-word;
	
	display: table-cell;
    vertical-align: middle;
    position: static;
}
.frm textarea {
	width: 260px;
	height: 80px;
}
.frm input[type="text"], .frm input[type="password"] {
	width: 260px;
}
.frm select {
	width: 260px;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".tabContents").hide(); 
		$("#tab2").show(); 
		
		$("#tabContaier ul li a").click(function(){ 
			
			var activeTab = $(this).attr("href"); 
			$("#tabContaier ul li a").removeClass("active"); 
			$(this).addClass("active"); 
			$(".tabContents").hide(); 
			$(activeTab).fadeIn(); 
		});
	});
</script>
</head>
<body>
	<!-- Header -->
	<!-- End Header -->
	<div id="content">
	<div id="mainContainer">
	<div class="box">
		<div id="container-orglst">
			<h4><a href="#">Organisation ></a> </h4>
			<h1>Business Unit/Directorate Details </h1>
			
			<div id="tabContaier">
				<ul>
					<li><a class="active" href="#tab1">Details 1</a></li>
					
					<li><a href="#tab2">Departments</a></li>
				</ul>
				<div class="btn">
							<input type="button" value="In-active" />
							<input type="button" value="Save" />
							<input type="button" value="Back" />
				</div>
				
				<div class="tabDetails">
					<div id="tab1" class="tabContents details1">

					</div>
					
					
					<div id="tab2" class="tabContents " style="height:589px" >
					
						
						
						
						<div class="top">
							<div class="top-left filter">
									<a href="#">All</a> | 
									<a href="#">0-9</a> | 
									<a href="#">A</a>
									<a href="#">B</a>
									<a href="#">C</a>
									<a href="#">D</a>
									<a href="#">E</a> | 
									<a href="#">F</a>
									<a href="#">G</a>
									<a href="#">H</a>
									<a href="#">I</a>
									<a href="#">J</a> | 
									<a href="#">K</a>
									<a href="#">L</a>
									<a href="#">M</a>
									<a href="#">N</a> | 
									<a href="#">O</a>
									<a href="#">P</a>
									<a href="#">Q</a>
									<a href="#">R</a> | 
									<a href="#">S</a>
									<a href="#">T</a>
									<a href="#">U</a>
									<a href="#">V</a> | 
									<a href="#">W</a>
									<a href="#">X</a>
									<a href="#">Y</a>
									<a href="#">Z</a>
							</div>
							<div class="top-right include" style="width: 220px; display: inline; margin-bottom: 10px; padding: 0">
								<a href="AddDirectorate.html"><input type="button" value="Create"/> </a>
								<input type="checkbox" name="incInActv" id="checkBoxIa" />
								<label class="lbcheck" for="checkBoxIa">Include Inactive</label>
							</div>
						</div>
						<div class="clear"></div>
						<div class="div-table">
							<div class="table-list">
								<table width="100%">
									<thead>
										<tr>
											<th>Department Name</th>
											<th>Address Line 1</th>
											<th>Post Code</th>
											<th>Contact</th>
											<th>Is Active?</th>
										</tr></thead>
									<tbody>
										<tr class="odd">
											<td><a href="DepartmentAmend_MinhNQ6B.html">department abcd</a></td>
											<td>Address Line 1</td>
											<td>SE 101</td>
											<td>Truong Gia Binh</td>
											<td>Yes</td>
										</tr>
										<tr class="odd">
											<td><a href="DepartmentAmend_MinhNQ6B.html">new department name</a></td>
											<td>Co flag</td>
											<td>CG 2470 </td>
											<td>HaTH</td>
											<td>Yes</td>
										</tr>
										
										
									</tbody>
								</table>
								
								
								
							<div style="text-align: right; margin: auto;">
							<span  class="pagelinks"style="float:bottom" >      
								<img src="img/fpg.gif" title="First Page" alt="First Page" />
								<img src="img/ppg.gif" title="Previous Page" alt="Previous Page" />
								Page <input style="font-size: 12px; width:35px; padding: 2px;" class="curpage" type="text" name="b" value="1" /> of <span class="nops">1</span> 
								<a href=""><img src="img/np.gif" title="Next Page" alt="Next Page" /></a>
								<a href=""><img src="img/lp.gif" title="Last Page" alt="Last Page" /></a>
							</span>
							
							
						</div>
					</div>
					
				</div>
			</div>
		</div>					
							
										
	</div>
	</div>
	</div>
	
	<!-- Footer -->
	<!-- End Footer -->
</body>
</html>